<template>
  <!-- 列表统计 -->
  <div v-for="(item, index) in config" :key="index">
    <FormItem v-if="item.isShow && item.isShow != 'null'" :label="item.text" :name="item.name">
      <div class="inputWrap">
        <Input v-model:value="item.desc" class="input" placeholder="描述" />
        <Input v-model:value="item.totalDesc" class="input" placeholder="总描述" />
        <Input v-model:value="item.number" class="input" placeholder="数值格式" />
      </div>
    </FormItem>
  </div>
</template>
<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Hooks, Form, Input } from '@jecloud/ui';
  import { decode, encode } from '@jecloud/utils';
  export default defineComponent({
    components: { FormItem: Form.Item, Input },
    props: {
      value: String,
      enableItems: String,
    },
    emits: ['update:value'],
    setup(props, context) {
      const value = Hooks.useModelValue({ props, context });
      const config = ref([]);
      // 默认值
      const defValue = [
        {
          name: 'msg',
          text: '配置(描述)',
          isShow: false,
          desc: '',
          totalDesc: '',
          number: '',
        },
        {
          name: 'count',
          text: '配置(计数)',
          isShow: false,
          desc: '',
          totalDesc: '',
          number: '',
        },
        {
          name: 'sum',
          text: '配置(求和)',
          isShow: false,
          desc: '',
          totalDesc: '',
          number: '',
        },
        {
          name: 'average',
          text: '配置(平均值)',
          isShow: false,
          desc: '',
          totalDesc: '',
          number: '',
        },
        {
          name: 'max',
          text: '配置(最大值)',
          isShow: false,
          desc: '',
          totalDesc: '',
          number: '',
        },
        {
          name: 'min',
          text: '配置(最小值)',
          isShow: false,
          desc: '',
          totalDesc: '',
          number: '',
        },
      ];
      watch(
        () => value.value,
        () => {
          config.value = value.value ? decode(value.value) : defValue;
        },
        { immediate: true },
      );
      watch(
        () => config.value,
        () => {
          value.value = encode(config.value);
        },
        { deep: true },
      );

      watch(
        () => props.enableItems,
        () => {
          config.value.forEach((item) => {
            item.isShow = props.enableItems?.includes(item.name);
            // 隐藏清空数据
            !item.isShow &&
              Object.assign(item, {
                desc: '',
                totalDesc: '',
                number: '',
              });
          });
        },
        { immediate: true },
      );

      return { config };
    },
  });
</script>
